import React, { ReactElement, useContext, useMemo } from 'react';
import { ScrollView, View } from 'react-native';

import { setPPTPlayer, setScroll } from '../../actions';
import { PPTType } from '../../constant';
import { Store } from '../../reducer';
import Problem from '../Problem';
import Video from '../VideoContainer';
import styles from './style';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { PPTList } = state;

  if (PPTList.length === 0) return <View />;
  return useMemo(
    (): ReactElement => (
      <ScrollView
        ref={setScroll}
        horizontal
        pagingEnabled
        scrollEnabled={false}
        style={styles.container}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        {PPTList.map(
          (ppt, index): ReactElement => {
            const {
              url,
              problem,
              audio,
              instantAnswer,
              rollCallUserInfo,
              videoType,
              lessonId
            } = ppt;
            if (ppt.type === PPTType.Video && url) {
              return (
                <Video
                  key={`ppt-${ppt.index}`}
                  ref={(res: any): void => {
                    setPPTPlayer(res, index);
                  }}
                  url={url}
                  audio={audio}
                  instantAnswer={instantAnswer}
                  rollCallUserInfo={rollCallUserInfo}
                  videoType={videoType}
                  lessonId={lessonId}
                />
              );
            }
            if (ppt.type === PPTType.Problem && problem) {
              return (
                <Problem
                  key={`ppt-${ppt.index}`}
                  ref={(res: any): void => {
                    setPPTPlayer(res, index);
                  }}
                  {...ppt}
                />
              );
            }
            return <View />;
          }
        )}
      </ScrollView>
    ),
    [PPTList]
  );
};
